﻿$colors: ( red, orange, yellow, green, blue, violet ) !default;

@function pastel($color) {
    $r: red($color);
    $g: green($color);
    $b: blue($color);

    // mix white
    $r: ($r + 255) / 2;
    $g: ($g + 255) / 2;
    $b: ($b + 255) / 2;

    @return rgb($r, $g, $b);
}

@mixin color-scheme($color) {

    $base-color: pastel($color);

    $header-background: pastel(darken($color, 5%));
    $header-foreground: lighten($base-color, 70%);

    $body-background: lighten($base-color, 50%);
    $body-foreground: darken($base-color, 50%);

    $desaturate_percent: 50%;
    $darken_percent: 5%;
    $lighten_percent: 50%;

    $primary: desaturate($color, $desaturate_percent);
    $primary-darker: darken($primary, $darken_percent);
    $primary-lighter: lighten($primary, $lighten_percent);

    $secondary: adjust_hue($primary, 120);
    $secondary-darker: darken($secondary, $darken_percent);
    $secondary-lighter: lighten($secondary, $lighten_percent);

    $tertiary: adjust_hue($primary, -120);
    $tertiary-darker: darken($tertiary, $darken_percent);
    $tertiary-lighter: lighten($tertiary, $lighten_percent);

    .#{$color} {

        .wjs-header {
            background-color: $header-background;
            color: $header-foreground;
        }

        .wjs-body {
            background-color: $body-background;
            color: $body-foreground;
        }

        .wjs-footer {
            background-color: $header-background;
            color: $header-foreground;
        }

        .wjs-selected {
            background-color: $secondary-darker !important;
            color: $tertiary-lighter !important;
        }

        .wjs-highlighted {
            background-color: $tertiary-lighter !important;
            color: $secondary-darker !important;
        }
    }
}

@each $color in $colors {
    @include color-scheme($color);
}
